<template>
	<view class="content" :style="{'padding-top':top+'px'}">
		<Navimage :title="detaillist.nickname" bgColor="#d86784" :backIcon="false" style="color: #ffffff;" :imageurl="detaillist.avatarUrl"></Navimage>
		<view style="width: 100vw;height: 1000rpx;">
			<swiper class="swiper" indicator-dots="true" autoplay="true" circular="true">
				<swiper-item v-for="item in photoAlbum" :key="item.id">
					<image mode="aspectFit" :src="item.blogImgUrl"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="title">{{detaillist.blogTitle}}</view>
		<view class="mainBody">
			<rich-text :nodes="detaillist.blogContent"></rich-text>
		</view>
		<view class="data">
			<uni-dateformat :date="detaillist.createdTime" format="发表于 yyyy-MM-dd hh:mm:ss"></uni-dateformat>
		</view>
		<view class="numberOfComments">
			共{{detaillist.blogCommentNum}}条评论
		</view>
		<view class="profilePictureLeaveAComment">
			<image :src="userInformation.avatarUrl" mode="aspectFill"></image>
			<uni-easyinput placeholder="爱评论的人运气都不差" @tap.stop="focusbottom(false)" confirm-type="send" hideKeyboard() disabled></uni-easyinput>
		</view>
		<view style="margin-bottom: 80rpx;">
			<view class="review" v-for="(item,index) in commentlist" :key="index">
				<image :src="item[0].avatarUrl" mode="aspectFill"></image><text class="nickname">{{item[0].nickname}}</text>
				<view class="reviewText" @tap.stop="focusbottom(item[0].id,undefined,item[0].nickname)">{{item[0].blogCommentContent}}<text>回复</text></view>
				<view class="recover" v-if="item.length>1" v-for="(project,num) in commentlist[index].slice(1,2)" :key="num">
					<image :src="project.avatarUrl" :id="num" mode="aspectFill"></image><view class="nickname"><text >{{project.nickname}}</text></view>
					<view class="recoverText" @tap.stop="focusbottom(item[0].id,project.id,project.nickname)">{{project.blogCommentContent}}<text>回复</text></view>
				</view>
				<view class="multipleReplies" v-if="item.length>2&&item.type===true" @click="unfold(index)">展开{{item.length-2}}条回复</view>
				<view class="recover" v-if="item.type===false" v-for="(project,num) in commentlist[index].slice(2)" :key="num">
					<image :src="project.avatarUrl" mode="aspectFill"></image>
					<view class="nickname"><text >{{project.nickname}}</text><text v-if="project.replyBlogCommentId" style="color:#000000;font-size: 28rpx;">回复</text><text v-if="project.replyBlogCommentId">{{project.replyNickname}}</text></view>
					<view class="recoverText" @tap.stop="focusbottom(item[0].id,project.id,project.nickname)">{{project.blogCommentContent}}<text>回复</text></view>
				</view>
				<view class="divider"></view>
			</view>
		</view>
		<view class="postAReview">
			<view class="clickToComment" v-if="popUpInputBox===false">
				<uni-easyinput 
				@tap.stop="focusbottom(false)" 
				hideKeyboard() 
				disabled 
				placeholder="说点什么..." 
				prefixIcon="compose"
				placeholderStyle="color:#555555;font-size:28rpx"
				></uni-easyinput>
				<view class="commentIcon"><uni-icons type="chat"></uni-icons><text>{{detaillist.blogCommentNum}}</text></view>
				<view :class="thumb===true ? 'likeselect' : 'likeIcon'" @tap.stop="like"><uni-icons :type="thumb===true ? 'hand-up-filled' : 'hand-up'"></uni-icons><text>{{detaillist.blogLikeNum}}</text></view>
			</view>
			<view class="leaveAComment" v-if="popUpInputBox">
				<uni-easyinput 
				:placeholder="placeholdertext" 
				@blur="blureject" 
				@confirm="comment"
				:focus="true"
				placeholderStyle="color:#555555;font-size:28rpx"
				cursor-spacing=5
				clearable
				v-model="commentText"
				confirmType="send"
				></uni-easyinput>
				<button size="mini" @click="comment">发送</button>
			</view>
		</view>
	</view>
</template>
<script setup>
	import { onMounted, ref } from 'vue'
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	const blogurl = getApp().globalData.blogurl
	const url = getApp().globalData.url
	const blogid=ref()
	const platform = ref()
	const statusBar = ref()
	const customBar = ref()
	const top = ref()
	const thumb=ref()
	const commentText=ref()
	const photoAlbum=ref([])
	const data=ref(Date.now())
	const keyboardHeight=ref()
	const popUpInputBox=ref(false)
	const detaillist=ref([])
	const commentlist=ref([])
	const whetherid=ref()
	const maincommentid=ref()
	const commentid=ref()
	const placeholdertext=ref()
	const userInformation=ref([])
	const comment=()=>{
		console.log(commentText.value)
		if(commentText.value===""){
			
		}else{
			if(whetherid.value===false){
				uni.request({
					url: blogurl + "/comment/add",
					method: "POST",
					dataType: "json",
					header: {
						'content-type': 'application/json',
						'Access-Control-Allow-Origin': "*",
						'Authorization': uni.getStorageSync('token')
					},
					data: {
						blogId: blogid.value,
						blogCommentContent:commentText.value,
						replyComment:0
					},
					success: function(res) {
						//console.log(res)
						commentText.value=""
						getcommentlist()
					}
				})
			}else{
				if(commentid.value===undefined){
					uni.request({
						url: blogurl + "/comment/add",
						method: "POST",
						dataType: "json",
						header: {
							'content-type': 'application/json',
							'Access-Control-Allow-Origin': "*",
							'Authorization': uni.getStorageSync('token')
						},
						data: {
							blogId: blogid.value,
							blogCommentContent:commentText.value,
							replyBlogMainCommentId:maincommentid.value,
							replyComment:1
						},
						success: function(res) {
							//console.log(res)
							commentText.value=""
							getcommentlist()
						}
					})
				}else{
					uni.request({
						url: blogurl + "/comment/add",
						method: "POST",
						dataType: "json",
						header: {
							'content-type': 'application/json',
							'Access-Control-Allow-Origin': "*",
							'Authorization': uni.getStorageSync('token')
						},
						data: {
							blogId: blogid.value,
							blogCommentContent:commentText.value,
							replyBlogMainCommentId:maincommentid.value,
							replyBlogCommentId:commentid.value,
							replyComment:1
						},
						success: function(res) {
							//console.log(res)
							commentText.value=""
							getcommentlist()
						}
					})
				}
			}
		}
	}
	const like=()=>{
		if(thumb.value===false){
			thumb.value=true
			detaillist.value.blogLikeNum=detaillist.value.blogLikeNum+1
			uni.request({
				url: blogurl + "/thumb",
				method: "GET",
				dataType: "json",
				header: {
					'content-type': 'application/json',
					'Access-Control-Allow-Origin': "*",
					'Authorization': uni.getStorageSync('token')
				},
				data: {
					blogId: blogid.value
				},
				success: function(res) {
					//console.log(res)
				}
			})
		}else{
			thumb.value=false
			detaillist.value.blogLikeNum=detaillist.value.blogLikeNum-1
			uni.request({
				url: blogurl + "/cancel/thumb",
				method: "GET",
				dataType: "json",
				header: {
					'content-type': 'application/json',
					'Access-Control-Allow-Origin': "*",
					'Authorization': uni.getStorageSync('token')
				},
				data: {
					blogId: blogid.value
				},
				success: function(res) {
					//console.log(res)
				}
			})
		}
	}
	const unfold=(index)=>{
		commentlist.value[index].type=false
	}
	const focusbottom=(MainCommentId,CommentId,nickname)=>{
		commentText.value=""
		console.log(MainCommentId,CommentId,nickname)
		if(MainCommentId===false){
			placeholdertext.value="爱评论的人运气都不差"
			whetherid.value=false
			maincommentid.value=null
		}else{
			if(CommentId===undefined){
				placeholdertext.value="回复 @"+nickname
				whetherid.value=true
			    maincommentid.value=MainCommentId
				commentid.value=undefined
			}else{
				placeholdertext.value="回复 @"+nickname
				whetherid.value=true
				maincommentid.value=MainCommentId
				commentid.value=CommentId
			}
		}
		//console.log(whetherid.value,maincommentid.value,commentid.value)
		popUpInputBox.value=true
		//console.log("底部获取焦点")
		uni.hideKeyboard()
	}
	const blureject=()=>{
		popUpInputBox.value=false
		console.log("弹出失去焦点")
	}
	const getcommentlist=()=>{
		uni.request({
			url: blogurl + "/comment/list",
			method: "POST",
			dataType: "json",
			header: {
				'content-type': 'application/json',
				'Access-Control-Allow-Origin': "*",
				'Authorization': uni.getStorageSync('token')
			},
			data: {
				blogId: blogid.value,
			},
			success: function(res) {
				//console.log(res.data.value)
				commentlist.value=res.data.value
				for(let key in commentlist.value){
					//console.log(commentlist.value[key])
					commentlist.value[key].type=true
				}
			}
		})
	}
	const getColumnHeight=()=>{
		uni.getSystemInfo({
			success(res) {
				//console.log(res)
				platform.value = res.platform
				// #ifdef MP-WEIXIN
				statusBar.value = res.statusBarHeight
				const custom = wx.getMenuButtonBoundingClientRect()
				customBar.value = custom.bottom + custom.top - res.statusBarHeight
				// #endif
				// #ifdef APP-PLUS
				statusBar.value = res.statusBarHeight
				customBar.value = res.statusBarHeight + 45
				// 这里是在安卓手机上加上 3 像素（当时好像是在安卓水滴屏上，系统导航栏高度较低才加上去的，大家可以真机自己调试一下）
				if (res.platform == "android") {
					statusBar.value += 3
					customBar.value += 3
				}
				// #endif
			}
		})
		top.value =customBar.value
		//console.log(statusBar.value, customBar.value, top.value)
	}
	onMounted(()=>{
		getColumnHeight()
	})
	onLoad((opts)=>{
		console.log(opts.id)
		blogid.value=opts.id
		uni.request({
			url: blogurl + "/details",
			method: "GET",
			dataType: "json",
			header: {
				'content-type': 'application/json',
				'Access-Control-Allow-Origin': "*",
				'Authorization': uni.getStorageSync('token')
			},
			data: {
				blogId: opts.id
			},
			success: function(res) {
				//console.log(res)
				detaillist.value=res.data.value
				if(detaillist.value.thumb===null){
					thumb.value=false
				}else{
					thumb.value=true
				}
			}
		})
		uni.request({
			url: blogurl + "/details/imgs",
			method: "GET",
			dataType: "json",
			header: {
				'content-type': 'application/json',
				'Access-Control-Allow-Origin': "*",
				'Authorization': uni.getStorageSync('token')
			},
			data: {
				blogId: opts.id
			},
			success: function(res) {
				//console.log(res)
				photoAlbum.value=res.data.value
			}
		})
		getcommentlist()
	})
	onShow(()=>{
		getColumnHeight()
		const now = new Date().getTime()
		if (!uni.getStorageSync('token') || now > uni.getStorageSync('expireTime')) {
			uni.reLaunch({
				url: "/pages/login/login"
			})
		}
		else{
			uni.request({
				url: url + "/info/account",
				method: "GET",
				dataType: "json",
				header: {
					'content-type': 'application/json',
					'Access-Control-Allow-Origin': "*",
					'Authorization': uni.getStorageSync('token')
				},
				data: {
					account: getApp().globalData.user.account
				},
				success: function(res) {
					console.log(res)
					userInformation.value = res.data.value
				}
			})
		}
	})
</script>
<style lang="less">
	.content {
		padding-top: 168rpx;
		min-height: calc(100vh - 288rpx);
		background-image: linear-gradient(to bottom, #d95e7d, #ffffff);
		padding-bottom: 120rpx;
	}
	.swiper{
		width: 100vw;
		height: 1000rpx;
		image{
			width: 100vw;
			height: 1000rpx;
		}
	}
	.title{
		padding: 40rpx;
		padding-bottom: 0;
		padding-top: 20rpx;
		font-weight:bold;
		font-size: 34rpx;
	}
	.mainBody{
		padding-left: 40rpx;
		padding-right: 40rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		font-size: 30rpx;
	}
	.data{
		width: calc(100vw - 20rpx);
		height: 50rpx;
		padding-left: 20rpx;
		font-size: 24rpx;
		color: #a7a7a7;
		border-bottom: 2rpx solid #a7a7a7;
		margin-bottom: 10rpx;
	}
	.numberOfComments{
		padding-left: 20rpx;
		font-size: 30rpx;
		color: #a7a7a7;
	}
	.profilePictureLeaveAComment{
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		//pointer-events: none;
		image{
			height: 54rpx;
			width: 54rpx;
			border-radius: 50%;
			margin-left: 40rpx;
			margin-right: 40rpx;
		}
		.uni-easyinput__content{
			border-radius: 37rpx !important;
			width: 600rpx ;
			z-index: 0;
		}
	}
	.review{
		width: 100%;
		height: auto;
		position: relative;
		margin-bottom: 20rpx;
		image{
			height: 54rpx;
			width: 54rpx;
			border-radius: 50%;
			margin-left: 40rpx;
			margin-right: 20rpx;
		}
		.nickname{
			font-size:30rpx ;
			position:absolute;
			top: 0;
			color: #a7a7a7;
		}
		.reviewText{
			margin-left: 114rpx;
			margin-right: 40rpx;
			font-size: 30rpx;
			margin-top: -20rpx;
			word-wrap: break-word;
			margin-bottom: 20rpx;
			text{
				font-size:26rpx ;
				color: #a7a7a7;
				display: inline-block;
				margin-left: 10rpx;
			}
		}
		.multipleReplies{
			margin-left:188rpx;
			font-size: 30rpx;
			color: #52a8fd;
			margin-bottom: 20rpx;
		}
		.divider{
			margin-left: 114rpx;
			border-bottom:solid 2rpx #a7a7a7;
		}
	}
	.recover{
		margin-left: 74rpx;
		width: calc(100vw - 74rpx);
		height: auto;
		position: relative;
		image{
			height: 54rpx;
			width: 54rpx;
			border-radius: 50%;
			margin-left: 40rpx;
			margin-right: 20rpx;
		}
		.nickname{
			font-size:30rpx ;
			position:absolute;
			left: 100rpx;
			top: 0;
			color: #a7a7a7;
			text{
				margin-left: 4rpx;
			}
		}
		.recoverText{
			width: 530rpx;
			margin-left: 114rpx;
			margin-right: 40rpx;
			font-size: 30rpx;
			margin-top: -20rpx;
			word-wrap: break-word;
			margin-bottom: 20rpx;
			text{
				font-size:26rpx ;
				color: #a7a7a7;
				display: inline-block;
				margin-left: 10rpx;
			}
		}
	}
	.clickToComment{
		display: flex;
		width: 100%;
		.uni-easyinput__content{
			border-radius: 37rpx !important;
			width: 400rpx ;
			background-color: #dddddd !important;
			color: #555555 !important;
		}
		.uni-icons{
			color: #555555 !important;
		}
	}
	.commentIcon{
		margin-left: 30rpx;
		height: 74rpx;
		display: flex;
		align-items: center;
		text{
			font-size: 32rpx;
			display: inline-block;
			height: 74rpx;
			line-height: 74rpx;
			min-width: 50rpx;
		}
	}
	.likeIcon{
		margin-left: 30rpx;
		height: 74rpx;
		display: flex;
		align-items: center;
		text{
			font-size: 32rpx;
			display: inline-block;
			height: 74rpx;
			line-height: 74rpx;
			min-width: 50rpx;
		}
	}
	.likeselect{
		margin-left: 30rpx;
		height: 74rpx;
		display: flex;
		align-items: center;
		color: red;
		text{
			font-size: 32rpx;
			display: inline-block;
			height: 74rpx;
			line-height: 74rpx;
			min-width: 50rpx;
			color: red !important;
		}
		.uni-icons{
			color: red !important;
		}
		
	}
	.leaveAComment{
		display: flex;
		justify-content: space-between;
		.uni-easyinput__content{
			border-radius: 37rpx !important;
			width: 550rpx ;
			height: 70rpx;
			background-color: #ffffff !important;
			border: #a7a7a7 solid 2rpx !important;
			.uni-icons{
				color: #a7a7a7 !important;   
			}
		}
		button{
			width: 150rpx;
			height: 70rpx;
			line-height: 70rpx;
			border-radius: 35rpx;
			background-color: #ad6a7c;
			color: #ffffff;
			padding: 0;
			margin: 0;
			margin-left: 10rpx;
		}
	}
	.postAReview{
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		width: calc(100vw - 60rpx);
		height: 120rpx;
		background-color: #ffffff;
		position: fixed;
		bottom: 0;
		border-top: 2rpx solid #dddddd;
		display: flex;
		z-index: 100;
		.uni-icons {
			font-size: 40rpx;
		}
	}
	.uni-easyinput__placeholder-class{
		z-index: 0 !important;
	}
</style>